<template>
    <div style="width: 100%;height: 100%;display: flex;">
<!--   侧边栏     -->
        <div style="width: 220px;height: 100%;overflow-y: auto;background-color:#ace0f9">
            <el-menu
                    background-color="#f5f5f5"
                    text-color="#555"
                    style="width: 100%;height: 100%;background: linear-gradient(to top,#ace0f9  0%, #fff1eb 60%);"
                    router unique-opened
            >
               <span style="font-size: 23px;font-weight: bolder;font-family: 华文彩云;color: #333;margin-left: 22px">快速点餐</span>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon style="font-size: 21px;"><Menu /></el-icon> <span>选择餐桌</span>
                    </template>
                    <el-menu-item style="background-color: #fff1eb;" index="/myTable">
                        <span style="margin-left: 20px;color: #53a7d8;">
                           餐桌详情
                        </span>
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon style="font-size: 21px;"><Fork-spoon/></el-icon> <span>点餐</span>
                    </template>
                    <el-menu-item style="background-color: #fff1eb;" @click="select_dish_by_type(item.id)" v-for="item in dish_type_arr">
                        <span style="margin-left: 20px;color: #53a7d8;">
                            {{item.name}}
                        </span>
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon style="font-size: 21px;"><Postcard/></el-icon> <span>餐厅评价</span>
                    </template>
                    <el-menu-item @click="toUserComment()">评价详情</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>
                        <el-icon style="font-size: 21px;"><Bell /></el-icon> <span>我的预约</span>
                    </template>
                    <el-menu-item @click="userReservation()">预约详情</el-menu-item>
                    <el-menu-item @click="userAffirmCome()">确认到店</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
<!--   右侧主体内容     -->
        <div style="width: calc(100% - 220px);height: 100%;overflow-y: auto">
<!--    右侧上方轮播图        -->
            <div v-if="is_show_carousel" style="width: 100%;height: 260px;">
                <el-carousel style="padding: 10px 80px;height: 260px">
                    <el-carousel-item v-for="item in imgList" :key="item">
                        <img :src="item" style="width: 100%; height: 70%"/>
                    </el-carousel-item>
                </el-carousel>
            </div>
<!--    右侧下方主体        -->
            <div style="width: 100%;height: 100%;overflow:auto;">
                <router-view/>
            </div>
        </div>

    </div>
</template>

<script setup>
import {computed, inject, onBeforeUpdate, onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";
import store from "@/store";

//菜系数组
const dish_type_arr = ref([])


//分店id
var branchId = store.state.global_branch_Id;

//顾客信息
const user = ref(getUser())


//查询分店中的所有菜系分类
const search_dish_type = ()=>{
    axios.get(BASE_URL+'/v1/dishType/select?branchId='+branchId)
        .then((response)=>{
            if(response.data.code===2000){
                dish_type_arr.value=response.data.data
                store.state.global_type_arr=dish_type_arr.value//将菜系数组进行状态管理
                if(store.state.global_type_arr.length===0){
                    ElMessage.warning('该店还在建设中，敬请期待')
                    router.push('/index')
                }
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}
//查询分店中的所有的菜品
const search_dish = ()=>{
    axios.get(BASE_URL+'/v1/dish/select?branchId='+branchId+'&status=0')
        .then((response)=>{
            if(response.data.code===2000){
                store.state.dish_arr=response.data.data
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}
//查询购物车记录
const select_cart = ()=>{
    let branchId = store.state.global_branch_Id
    let userId = user.value.id
    axios.get(BASE_URL+'/v1/cart/select?branchId='+branchId+'&userId='+userId)
        .then((response)=>{
            if(response.data.code===2000){
                store.state.global_shopping_cart_arr=response.data.data
            }
        })
}
//通过菜系id查询菜品
const select_dish_by_type = (typeId)=>{
    //router.push({path:'/dishCard',query:{typeId:item.id}})
    if(router.currentRoute.value.path!=='/dishCard'){
        router.push('/dishCard')
    }
    axios.get(BASE_URL+'/v1/dish/select?typeId='+typeId+'&status=0')
        .then((response)=>{
            if(response.data.code===2000){
                store.state.dish_arr=response.data.data
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}

onMounted(()=>{
    search_dish_type()
    search_dish()
    select_cart()
})

/*const route = useRoute()
branchId = route.query.id
onMounted(()=>{
    getTablesByID(tables_arr,branchId)
})*/

// 定义一个图片数组，进行轮播
const imgList = ref([
  "/imgs/carousel/img1.png",
  "/imgs/carousel/img2.png",
  "/imgs/carousel/img3.png",
  "/imgs/carousel/img4.png",
])
const is_show_carousel = ref(false)
//
// 跳转到用户评价
const toUserComment=()=>{
  router.push({path:'/userComment',query:{id:branchId}})
}
// 跳转到用户确认到店页面
const userAffirmCome=()=>{
  router.push({path:'/userAffirmCome',query:{id:branchId}})
}
// 跳转到用户预约页面
const userReservation=()=>{
  router.push({path:'/userReservation',query:{id:branchId}})
}

</script>

<style scoped>
//background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);


</style>